<html>
    <head>
        <title>如何将 store 实例注入组件</title>
    </head>
    <body>
        <script>
            /*
                     二、将 store (状态存储器) 从根组件 "注入" 到每一个组件中

                                ★、为什么要通过根实例注入store （状态存储器）

                                                由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：

                                                            eg: 

                                                                // 创建一个 Counter 组件

                                                                const Counter ={

                                                                    computed:{

                                                                        count(){
                                                                            return store.state.count
                                                                        }
                                                                    }
                                                                }

                                                每当 store.state.count 变化的时候，都会重新求取计算属性，并且触发更新相关联的DOM。

                                                然而，这种模式导致组件依赖全局状态单例。  在模块化的构建系统中，在每个需要使用 state 的组件中需要频繁地导入，并且在测试组件时需要模拟状态。


                                ★、如何注入

                                    Vuex 通过 store 选项，提供了一种机制将状态从根组件 "注入" 到每一个子组件中 (需要调用  Vue.use(Vuex)):

                                        1、在 uni-app 项目根目录下，新建 store 目录，在此目录下新建  index.js 文件。  在 index.js 文件配置如下：

                                                        // 页面路径：   store/index.js

                                                        import Vue from 'vue'
                                                        import Vuex from 'vuex'

                                                        Vue.use(Vuex);  // vue 的插件机制，使用 Vuex插件

                                                        // Vuex.Store 构造器选项
                                                        const store = new Vuex.Store({
                                                            state:{ // 存放状态
                                                                "username":"foo",
                                                                "age":18
                                                            }
                                                        })
                                                        
                                                        export default store;  // 导出store实例

                                            
                                        2、在 main.js 中导入文件

                                                        // 页面路径：  main.js
                                                        import Vue from 'vue'
                                                        import App from './App'
                                                        import store from './store'

                                                        Vue.prototype.$store = store;

                                                        // 把 store 对象提供给 "store" 选项，这可以把 store 的实例注入所有的子组件
                                                        const app = new Vue({
                                                            store,
                                                            ...App
                                                        })

                                                        app.$mount(); // 挂载
                  */  
        </script>
    </body>
</html>